<template>
    <div> 
        <NavTop/>
        <div style="width: 1400px;margin: auto;">
            <el-table
                ref="multipleTableRef"
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" :selectable="selectable" width="55" />
                <el-table-column label="小宠编号" width="120" property="id"></el-table-column>
                <el-table-column property="name" label="小宠名称" width="120" />
                <el-table-column property="price" label="带它回家(g)" />
                <el-table-column property="onlineprice" label="空运回家(g)" />
                <el-table-column property="num" label="数量" />
                <el-table-column property="total" label="总金额(g)" />

                <el-table-column align="right">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="Type to search" />
                    </template>
                    <template #default="scope">
                        <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index)"
                        >
                        删除
                        </el-button>
                    </template>
                    </el-table-column>
            </el-table>
            <br>
            <el-button @click="buy()">购买</el-button>
        </div>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop.vue';
import { useGoodStore } from '@/store/goods';
import { ElMessageBox,ElMessage } from 'element-plus';

export default{
    components:{
        NavTop
    },
    data(){
        return{
            multipleTableRef:null,
            multipleSelection:[],
            tableData:JSON.parse(sessionStorage.getItem('cart')),
            store:useGoodStore(),
            time:new Date(),
            sum:0,
            num:0
        }
    },
    // mounted(){
    //     this.tableData=this.store.cartData
    // }
    methods:{
        handleDelete(index){
                ElMessageBox.confirm(
                '确定要删除可爱的宝宝吗?',
                'Warning',
                {
                confirmButtonText: '委婉拒绝',
                cancelButtonText: '手滑了',
                type: 'warning',
                }
            )
                .then(() => {
                        this.tableData.splice(index,1)
                        sessionStorage.setItem('cart',JSON.stringify(this.tableData))
                })
                .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '删除取消',
                })
                })
            
        },
        buy(){
            if(this.multipleSelection==''){
                alert("请选中要购买的商品")
            }else{
            //打印订单号
            this.orderID=this.time.getFullYear().toString() +(this.time.getMonth()+1).toString()+this.time.getDate().toString()+
                Math.random().toString().slice(2,10)
            console.log(this.orderID);
            //统计商品总金额和总数量
              
                //从选中的商品中进行循环遍历，把每个商品的数量和金额相加。注意，我们选中的商品时放在multiSelection数组中
                this.multipleSelection.map(v=>{
                    this.num+=v.num
                    this.sum+=parseInt(v.total)   //强制转换成整型
                })
                //验证一下sum和num数据是否ok，程序最后清理时，可以吧这些
                console.log(this.num);
                console.log(this.sum);
                //把商品信息添加到订单数组中去
                this.store.orderAdd({
                    orderID:this.orderID,
                    time:new Date(),
                    num:this.num,
                    sum:this.sum,
                    isOrdered:false,//设置一个变量，用来记录订单支付
                    child:[...this.multipleSelection]   //展开运算符，通常用来把一个数组逐一进行操作，相当于进行循环
                })
                //打印订单数组，过程性检查
                console.log(this.store.orderData);
                //在购物车中删除已经购买的商品
                this.multipleSelection.forEach(list=>{
                     //找到购物车数组中与选中商品编号一致的商品，然后把这个商品的下标放入到X中
                    let x=this.tableData.findIndex(item=>item.id==list.id)
                   
                    this.tableData.splice(x,1)
                    sessionStorage.setItem('cart',JSON.stringify(this.tableData))  //更新session里面的购物车数据
                })

                ElMessageBox.alert('小主，订单已生成，请前往订单页面支付', '喵', {
            // if you want to disable its autofocus
            // autofocus: false,
            confirmButtonText: '知道了',
           
  })
           
            }
        },
        handleSelectionChange(val){
            this.multipleSelection=val  //把选中的商品放入到这个数组中
        }

    },
   
}
</script>